import PropsTable from 'components/PropsTable'

## Introduction

Evergreen exports two components to create text inputs:

* **Select**: base text input component. Directly maps to a `select` element.
* **SelectField**: combines a label, select and validation message in one. Used for traditional forms.

# Select

The `Select` component is a styled wrapper around a native select element,
which allows selection of one item from a dropdown list.
Anytime you would reach for a native select, use this.

## Uncontrolled usage

```jsx
<Select onChange={event => alert(event.target.value)}>
  <option value="foo" selected>Foo</option>
  <option value="bar">Bar</option>
</Select>
```

## Controlled usage

```jsx
<Component initialState={{ value: 'foo' }}>
  {({ state, setState }) => (
    <Select value={state.value} onChange={event => setState({ value: event.target.value })}>
      <option value="foo" selected>Foo</option>
      <option value="bar">Bar</option>
    </Select>
  )}
</Component>
```

## Full width

```jsx
<Select width="100%">
  <option value="foo" selected>Foo</option>
  <option value="bar">Bar</option>
</Select>
```

## Custom width

```jsx
<Select width={240}>
  <option value="foo" selected>Foo</option>
  <option value="bar">Bar</option>
</Select>
```

## Change height

```jsx
<Select width={240} height={40}>
  <option value="foo" selected>Foo</option>
  <option value="bar">Bar</option>
</Select>
```

## Add margins

```jsx
<Select width={240} height={40} marginBottom={40}>
  <option value="foo" selected>Foo</option>
  <option value="bar">Bar</option>
</Select>
```

<PropsTable of="Select" />


# SelectField

## Label and description

```jsx
<SelectField
  label="Default text input field"
  description="This is a description."
>
  <option value="foo" selected>Foo</option>
  <option value="bar">Bar</option>
</SelectField>
```

## A hint is under the text input

```jsx
<SelectField
  label="Default text input field"
  hint="This is a hint."
>
  <option value="foo" selected>Foo</option>
  <option value="bar">Bar</option>
</SelectField>
```

## Required text input field

```jsx
<SelectField
  id="ids-are-optional"
  label="A required text input field"
  required
  description="This is a description."
>
  <option value="foo" selected>Foo</option>
  <option value="bar">Bar</option>
</SelectField>
```

## Invalid field

```jsx
<SelectField
  isInvalid
  required
  label="A required text input field"
  description="This is a description."
  validationMessage="This field is required"
>
  <option value="foo" selected>Foo</option>
  <option value="bar">Bar</option>
</SelectField>
```

## Validation message without invalid input

```jsx
<SelectField
  isInvalid={false}
  required
  label="A required text input field"
  description="This is a description."
  validationMessage="This field is required"
>
  <option value="foo" selected>Foo</option>
  <option value="bar">Bar</option>
</SelectField>
```

## Controlled usage

The `SelectField` component works the same as using `input` directly.
Use `e.target.value` to get the value of the component on change. 

```jsx
<Component initialState={{ value: 'foo' }}>
  {({ state, setState }) => (
    <SelectField
      label="A controlled text input field"
      required
      description="This is a description."
      value={state.value}
      onChange={e => setState({ value: e.target.value })}
    >
      <option value="foo" selected>Foo</option>
      <option value="bar">Bar</option>
    </SelectField>
  )}
</Component>
```

